<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>进制转换工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">进制转换工具</h1>
        <form class="mb-3">
            <div class="form-floating">
                <input class="form-control" type="text" placeholder="请输入要转换的数值" id="numInput">
                <label for="numInput">请输入要转换的数值</label>
            </div>
            <div class="form-check mt-3">
                <input class="form-check-input" type="radio" name="convertType" id="binToOther" value="binToOther"
                    checked>
                <label class="form-check-label" for="binToOther">
                    从二进制转换
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="convertType" id="octToOther" value="octToOther">
                <label class="form-check-label" for="octToOther">
                    从八进制转换
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="convertType" id="decToOther" value="decToOther">
                <label class="form-check-label" for="decToOther">
                    从十进制转换
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="convertType" id="hexToOther" value="hexToOther">
                <label class="form-check-label" for="hexToOther">
                    从十六进制转换
                </label>
            </div>
        </form>
        <button type="button" class="btn btn-primary" onclick="convert()">转换</button>
        <div class="mt-4">
            <p>二进制：<span id="binResult"></span></p>
            <p>八进制：<span id="octResult"></span></p>
            <p>十进制：<span id="decResult"></span></p>
            <p>十六进制：<span id="hexResult"></span></p>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        function convert() {
            // 获取转换类型和要转换的数值
            const convertType = $('input[name="convertType"]:checked').val();
            const numInput = $("#numInput").val();

            // 进行转换
            let binResult = "";
            let octResult = "";
            let decResult = "";
            let hexResult = "";

            switch (convertType) {
                case "binToOther":
                    decResult = BigInt(parseInt(numInput, 2));
                    octResult = decResult.toString(8);
                    hexResult = decResult.toString(16).toUpperCase();
                    binResult = numInput;
                    break;
                case "octToOther":
                    decResult = BigInt(parseInt(numInput, 8));
                    binResult = decResult.toString(2);
                    hexResult = decResult.toString(16).toUpperCase();
                    octResult = numInput;
                    break;
                case "decToOther":
                    decResult = BigInt(numInput);
                    binResult = decResult.toString(2);
                    octResult = decResult.toString(8);
                    hexResult = decResult.toString(16).toUpperCase();
                    break;
                case "hexToOther":
                    decResult = BigInt(`0x${numInput}`);
                    binResult = decResult.toString(2);
                    octResult = decResult.toString(8);
                    hexResult = numInput.toUpperCase();
                    break;
                default:
                    break;
            }

            // 更新页面显示的转换结果
            document.getElementById("binResult").innerHTML = binResult;
            document.getElementById("octResult").innerHTML = octResult;
            document.getElementById("decResult").innerHTML = decResult.toString();
            document.getElementById("hexResult").innerHTML = hexResult;
        }
    </script>
</body>

</html>